<template>
	<view class="tabbar">
		<view 
			class="tab-item" 
			:class="{ active: currentPage === '/pages/workshopUser/index/index' }"
			@click="redirectTo('/pages/workshopUser/index/index')"
		>
			<image src="@/static/tabbar/星球.png"></image>
			<text>首页</text>
		</view>

		<view 
			class="tab-item" 
			:class="{ active: currentPage === '/pages/workshopUser/manage/manage' }"
			@click="redirectTo('/pages/workshopUser/manage/manage')"
		>
			<image src="@/static/tabbar/消息.png"></image>
			<text>消息</text>
		</view>

		<view 
			class="tab-item" 
			:class="{ active: currentPage === '/pages/workshopUser/mine/mine' }"
			@click="redirectTo('/pages/workshopUser/mine/mine')"
		>
			<image src="@/static/tabbar/我的.png"></image>
			<text>我的</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentPage: ''
		};
	},
	methods: {
		redirectTo(url) {
			if (this.currentPage !== url) {
				uni.redirectTo({ url });
			}
		},
		getCurrentPage() {
			// 获取当前页面路径
			const pages = getCurrentPages();
			const current = pages[pages.length - 1].route;
			this.currentPage = `/${current}`;
		}
	},
	mounted() {
		this.getCurrentPage();
	}
}
</script>

<style>
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	padding: 10px 0;
}
.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	color: #444;
	padding: 10px;
}
.tab-item.active {
	color: #1296db;
	font-weight: bold;
}
image {
	width: 24px;
	height: 24px;
}
</style>
